<template>
  <div class="d1">
    <div style="height: 150px"></div>
    <div class="login-container">
      <!-- 左侧图片 -->
      <div class="login-image">
        <!-- <h2 style="text-align: center; margin-top: 50px"></h2> -->

        <!-- <div class="container1">
          <div class="box box1"></div>
          <div class="box box2"></div>
          <div classdiv class="box box3"></div>
        </div> -->
      </div>

      <!-- 右侧登录表单 -->
      <div class="login-form">
        <el-form ref="loginForm" :model="form" label-width="80px">
          <el-form-item>
            <el-input v-model="form.username" placeholder="admin"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.password"
              placeholder="123456"
              type="password"
              @keyup.enter.native="handleLogin"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              @click.native.prevent="handleLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
        <!-- <p>没有账号？<a href="#">注册</a></p> -->
      </div>
    </div>
  </div>
</template>

<script>
import crypto from "crypto";
import countdown from "vue2-countdown";
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
// const crypto = require('crypto');

function md5(str) {
  const hash = crypto.createHash("md5");
  hash.update(str);
  return hash.digest("hex");
}
export default {
  data() {
    return {
      loading: false,
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
        

          console.log("11", md5(this.form.password));
          // if (this.loginForm.rememberMe) {
          //   Cookies.set("username", this.loginForm.username, { expires: 30 });
          //   Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
          //   Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
          // } else {
          //   Cookies.remove("username");
          //   Cookies.remove("password");
          //   Cookies.remove("rememberMe");
          // }
          this.$store
            .dispatch("Login", {
              username: this.form.username,
              password: md5(this.form.password),
            })
            .then(() => {
              this.$router.push({ path: this.redirect || "/home" }).catch(() => {});
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

<style scoped>
.container1 {
  display: flex;
  flex-direction: column;
  height: 100%;

  .box {
    flex: 1;
  }

  .box1 {
    background-color: #5cb87a;
  }

  .box2 {
    background-color: #e6a23c;
  }

  .box3 {
    background-color: #f56c6c;
  }
}

.d1 {
  background-color: #555;
  height: 100vh;
}
.login-container {
  position: relative;
  margin: 0 auto;
  display: flex;
  background-color: whitesmoke;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  width: 600px;
  height: 400px;
}

.login-image {
  flex: 1;
  /* background-image: url("./deep.jpg"); */
  background-color: #222222;
  /* 替换为你的图片地址 */
  background-size: cover;
  background-position: center;
  /* opacity: 0.8; */
}

.login-form {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.login-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.login-form button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.login-form button:hover {
  background-color: #0056b3;
}

.login-form p {
  text-align: center;
  margin-top: 10px;
  color: #666;
}

.login-form a {
  color: #007bff;
  text-decoration: none;
}

.login-form a:hover {
  text-decoration: underline;
}
</style>
